<template>
	<!-- 第一个圆角矩形背景，包含主要文字 -->
	<view class="first-rectangle">
		<view class="text-container">
			<view class="today">
				<text>今日天气</text>
			</view>

			<!-- 温度部分，前面有一个小图片 -->
			<view class="temperature-container">
				<image class="temp-icon iconfont" :class="`qi-${now?.icon}`" alt="weather icon" />
				<text class="temperature">{{now?.temp}}°</text>
			</view>

			<view class="condition">
				<text>{{ now?.text }}</text>
			</view>
			<view class="location">
				<text>{{location.name}}, {{ location.adm2}}, {{ location.adm1 }}</text>
			</view>
			<view class="date">
				<text>{{updateTime}}</text>
			</view>
			<view class="feels-like">
				<text>风向：{{ now?.windDir }} {{ now?.windScale }}级 | 湿度：{{ now?.humidity }}% |
					气压：{{ now?.pressure }}Pa</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		defineProps,
		onBeforeMount
	} from 'vue';

	import {
		host,
		key
	} from '@/common/weather_api';
	import {
		formatDate
	} from '@/common/utils.js';

	const {
		location
	} = defineProps({
		location: Object
	});
	const weather_icon = ref('');
	const now = ref(null);
	const updateTime = ref('');
	const api_url = `https://${host}//v7/weather/now?location=${location.id}&key=${key}`;

	const getWeather = () => {
		uni.request({
			url: api_url,
			method: 'GET',
			success: (res) => {
				now.value = res.data.now;
				let dt = new Date(res.data.updateTime);
				updateTime.value = formatDate(dt, 'YYYY-MM-DD hh:mm');

			},
			fail: (err) => {
				console.error("请求失败", err);
			},
		});
	}

	onBeforeMount(() => {
		getWeather();
	})
</script>


<style lang="scss" scoped>
	.first-rectangle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80%;
		height: auto;
		margin: 10px 0;
		/* 上下间距 */
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		border-radius: 2.19rem;
		background: var(--bg--color1);

		/* 第一个矩形颜色 */
		.text-container {
			text-align: center;
			/* 文字居中 */

			.today {
				margin-top: 1.56rem;

				text {
					/* 今日文字大小 */
					font-size: 1rem;
					font-weight: 600;
				}
			}

			.temperature-container {
				display: flex;
				/* 弹性布局 */
				align-items: center;
				/* 垂直居中对齐 */
				justify-content: center;
				/* 水平居中对齐 */
				margin-bottom: 10px;

				.temp-icon {
					width: 4.5rem;
					height: 4.5rem;
					margin-right: 8px;
					font-size: 4.5rem;
					/* 图片与文字的间距 */
				}

				.temperature {

					/* 温度文字大小 */
					font-size: 5.25rem;
					font-weight: 500;
				}
			}

			.condition {

				text {
					/* 天气状况文字大小 */
					font-size: 1rem;
					font-weight: 600;
				}

				margin-bottom: 10px;
			}

			.location {
				text {
					font-size: 24px;
					/* 地点文字大小 */
					font-size: 1rem;
				}

				margin-bottom: 10px;
			}

			.date {
				text {
					font-size: 18px;
					/* 日期文字大小 */
					font-size: 1rem;
				}

				margin-bottom: 10px;
			}

			.feels-like {
				margin-bottom: 1.56rem;
				;

				text {
					/* 体感温度文字大小 */
					font-size: 1rem;
				}

			}

			.hourly-forecast {
				display: flex;
				flex-direction: column;
				/* 垂直排列 */
				align-items: center;
			}


		}

	}
</style>